import React, { Component, } from 'react'
import {
    Text, View, Image, ScrollView, Platform,
    TouchableOpacity, StyleSheet,
    TextInput
} from 'react-native'
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation'
import { NavigationHeader } from '../../components'
import { Px } from '../../utils'


class LoginWithPhone extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillMount() {
    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <NavigationHeader
                    title="登录"
                />
                <View style={styles.containView}>
                    <View style={styles.phoneView}>
                        <TextInput
                            style={styles.phone}
                            placeholder="请输入手机号"
                        />
                    </View>
                    <View style={styles.verifyView}>
                        <TextInput
                            style={styles.verifyText}
                            placeholder="请输入验证码"
                        />
                        <TouchableOpacity style={styles.verifyButton}>
                            <Text style={styles.verifyButtonText}>获取验证码</Text>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity style={styles.registerBtn}>
                        <Text style={styles.registerText}>登录</Text>
                    </TouchableOpacity>
                </View>

            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    containView: {
        flex: 1,
        backgroundColor: '#fff',
        paddingHorizontal: Px(24)
    },
    phoneView: {
        marginTop: Px(30),
        height: Px(60)
    },
    phone: {
        backgroundColor: '#e9e9e9',
        height: '100%',
        borderRadius: Px(4)
    },
    verifyView: {
        marginTop: Px(30),
        height: Px(60),
        flexDirection: 'row'
    },
    verifyText: {
        backgroundColor: '#e9e9e9',
        height: '100%',
        flex: 3,
        borderRadius: Px(4)
    },
    verifyButton: {
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FC3F30',
        marginLeft: Px(20),
        borderRadius: Px(4)
    },
    verifyButtonText: {
        fontSize: Px(26),
        color: '#fff'
    },
    registerBtn: {
        backgroundColor: '#FC3F30',
        marginTop: Px(30),
        height: Px(60),
        alignItems: 'center',
        justifyContent: 'center'
    },
    registerText: {
        fontSize: Px(26),
        color: '#fff'
    }
});

export default connect(state => ({

})
)(LoginWithPhone)
